<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary">获取当前页码</a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, onMounted } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    FormSchema,
    FormProps,
    PaginationProps,
  } from '/@/components/Table';
  import { GetGameDayStatisResultModelApi, GameUserChannelApi } from '/@/api/statis/dayStatis';
  import { useWatermark } from '/@/hooks/web/useWatermark';
  import { dateUtil } from '/@/utils/dateUtil';
  import { ChannelItem } from '/@/api/statis/model/statisModel';

  interface DataProps {
    getAdvanceSchema: FormSchema[];
    columns: BasicColumn[];
    channelOptions: ChannelItem[];
  }
  interface formDataparams {
    startDate: string;
    endDate: string;
    pagesize?: number;
    channel: string;
    pageidx?: number;
  }
  export default defineComponent({
    components: { BasicTable },
    setup() {
      const data: DataProps = reactive({
        getAdvanceSchema: [
          {
            field: `date`,
            label: `日期`,
            component: 'RangePicker',
            colProps: {
              span: 6,
            },
            componentProps: {
              valueFormat: 'YYYY-MM-DD',
            },
            defaultValue: ['2022-04-28', '2022-05-04'],
          },
          {
            field: `channel`,
            label: `渠道`,
            component: 'Select',
            colProps: {
              span: 6,
            },

            componentProps: {
              placeholder: '请选择渠道~',
              options: [],
            },

            defaultValue: '',
          },
        ],
        columns: [
          {
            title: '日期',
            dataIndex: 'day',
            width: 150,
          },
          {
            title: '用户总数',
            dataIndex: 'userCnt',
            width: 100,
            filters: [
              { text: 'Male', value: 'male' },
              { text: 'Female', value: 'female' },
            ],
          },
          {
            title: '对战人数',
            dataIndex: 'playUserCnt',
            width: 100,
          },

          {
            title: '新增用户',
            dataIndex: 'newUserCnt',
            width: 100,
          },
          {
            title: '付费人数',
            dataIndex: 'rechargeUserCnt',
            width: 100,
          },

          {
            title: '付费次数',
            dataIndex: 'rechargeCnt',
            width: 100,
          },

          {
            title: '付费金额',
            dataIndex: 'rechargeTotal',
            width: 100,
          },
          {
            title: '匹配局数',
            dataIndex: 'matchRoundCnt',
            width: 100,
          },

          {
            title: '人机局数',
            dataIndex: 'robotRoundCnt',
            width: 100,
          },
          {
            title: '视频拉取次数',
            dataIndex: 'videoCnt',
            width: 150,
          },

          {
            title: '领取视频奖励次数',
            dataIndex: 'videoRewardCnt',
            width: 150,
          },
          {
            title: '日活（DAU）',
            dataIndex: 'loginUserCnt',
            width: 100,
          },
          {
            title: '次日留存',
            dataIndex: 'day2Login',
            width: 100,

            customRender: customFomart,
          },

          {
            title: '3日留存',
            dataIndex: 'day3Login',
            width: 100,

            customRender: customFomart,
          },

          {
            title: '7日留存',
            dataIndex: 'day7Login',
            width: 100,
            customRender: customFomart,
          },
        ],
        channelOptions: [],
      });

      const params: formDataparams = {
        startDate: '',
        endDate: '',
        pagesize: 0,
        channel: '',
        pageidx: 0,
      };

      const [registerTable, { getForm, getPaginationRef }] = useTable({
        canResize: true,
        title: '每日统计', //表格标题
        titleHelpMessage: '游戏数据的每日统计', //表格标题右侧温馨提醒
        columns: data.columns, //列参数
        api: GetGameDayStatisResultModelApi, //请求方法api
        beforeFetch(info) {
          //设置请求参数
          console.log('当前页码信息', getForm().getFieldsValue());
          console.log('当前页码信息', getPaginationRef());
          const formData = getForm().getFieldsValue();
          const pagination = getPaginationRef() as PaginationProps;
          params.startDate = dateUtil(formData.date[0]).format('YYYY-MM-DD');
          // params.startDate = formData.date[0];  dateUtil(formData.date[0]).format("YYYY-MM-DD")
          params.endDate = dateUtil(formData.date[1]).format('YYYY-MM-DD');
          // params.endDate = formData.date[1];
          params.channel = formData.channel;
          params.pageidx = pagination.current;
          params.pagesize = pagination.pageSize;
          info = params;
          return info;
        },
        useSearchForm: true,
        formConfig: getFormConfig(), //表单配置，参考表单组件的 Props
        showTableSetting: true, //显示表格设置工具
        tableSetting: {
          // 是否显示刷新按钮
          redo: true,
          // 是否显示尺寸调整按钮
          size: true,
          // 是否显示字段调整按钮
          setting: true,
          // 是否显示全屏按钮
          fullScreen: true,
        },
        striped: true, //斑马纹
        pagination: true, //分页
      });
      const { setWatermark } = useWatermark();
      function getFormConfig(): Partial<FormProps> {
        return {
          labelWidth: 80,
          schemas: [...data.getAdvanceSchema],
        };
      }

      const getChannelList = async () => {
        let res = await GameUserChannelApi();
        data.channelOptions = res.list;
        let newArr = res.list.map((item) => {
          let obj = {
            label: item.name,
            value: item.channel,
            key: item.channel,
          };
          return obj;
        });

        data.getAdvanceSchema[1].componentProps.options = newArr;
        console.log('resChannel', res);
      };

      function customFomart({ text }: { text: any }) {
        const obj: any = {};
        if (text === 0 || text === '' || text === undefined) {
          obj.text = '0%';
        } else {
          obj.text = (text * 100).toFixed(2) + '%';
        }
        return obj.text;
      }

      onMounted(() => {
        setWatermark('广东触族互娱科技有限公司');
        getChannelList();
      });

      return {
        getFormConfig,
        registerTable,
        customFomart,
        setWatermark,
        getChannelList,
      };
    },
  });
</script>
